<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { message } from 'ant-design-vue'
  import { createRoleReq } from '@/api'

  interface FormState {
    name: string
  }

  const formState = reactive<FormState>({
    name: '',
  })

  const formRef = ref()

  const showCreate = defineModel()

  const onSubmit = () => {
    formRef.value
      .validate()
      .then(async () => {
        const res = await createRoleReq({
          name: formState.name,
        })
        if (res?.data) {
          message.success('角色创建成功')
          showCreate.value = false
        } else {
          message.error('角色创建失败')
        }
      })
      .catch(() => {})
  }
</script>

<template>
  <a-form
    ref="formRef"
    :model="formState"
    name="CreateRoleForm"
    style="padding: 20px"
  >
    <a-form-item
      name="name"
      label="名称"
      :validate-trigger="['']"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 14 }"
      :rules="[{ required: true, message: '名称不能为空' }]"
    >
      <a-input v-model:value.trim="formState.name" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 7, span: 16 }">
      <a-button
        type="primary"
        style="width: 200px; height: 40px"
        @click="onSubmit"
        >提交
      </a-button>
    </a-form-item>
  </a-form>
</template>

<style scoped lang="less"></style>
